import React from 'react';
import { Row, Col} from 'antd';

import './Footer.less';

const BrowserFooter = ({data}) => 
    <div className="footer">
        <Row className="footer-title-row" type="flex" justify="center">
            <Col className="footer-title-row-col" span={16}><span>{data.title}</span></Col>
        </Row>
        
        <Row className="footer-row" type="flex" justify="center">
            <Col span={16} className="footer-row-col">

                <Row className="footer-row-col-content" type="flex" justify="center" gutter={2}>
                    <Col className="footer-row-col-content-one" span={12} xs={24} sm={12}>
                        <div className="footer-row-col-content-one-title">{data.subscribe.title}</div>
                        <p className="footer-row-col-content-one-content">{data.subscribe.content}</p>
                        <form className="footer-row-col-content-one-form">
                            <div className="footer-row-col-content-one-form-border">
                                <input placeholder={data.subscribe.placeholder} className="footer-row-col-content-one-form-border-input" />
                            </div>   
                            <input className="footer-row-col-content-one-form-submit" value={data.subscribe.button} type="submit" />
                        </form>
                    </Col>
                    <Col span={1} xs={0} md={1} className="footer-row-col-content-oneborder"></Col>
                    <Col className="footer-row-col-content-two" span={10} xs={24} sm={10}>
                        <div className="footer-row-col-content-two-title">{data.contact.title}</div>
                        <p>{data.contact.tel}</p>
                        <p>{data.contact.fax}</p>
                        <p>{data.contact.add}</p>
                    </Col>
                    </Row>
            </Col>
        </Row>
    </div>

export default BrowserFooter;